<template>
    <div class="main">
        
        <swiper class="swiper" :options="swiperOption" >
        <!-- slides -->
            <swiper-slide><img src="static/img/swiper1.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="static/img/swiper2.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="static/img/swiper3.jpg" alt=""></swiper-slide>
        </swiper>
        <div class="box">
            <div class="swiper-bottom">
                <div class="left">
                    <img class="ewm" src="/static/img/ewm.png" alt="">
                    <img class="dow1" src="/static/img/ewm3.png" alt="">
                    <img class="dow2" src="/static/img/ewm4.png" alt="">
                </div>
                <div class="right">
                    <ul class="list">
                        <li class="item" v-for='item of list' :key='item.id'>
                            <h2 class="item-title">{{item.title}}</h2>
                            <p class="item-content">{{item.content}}</p>
                            <span class="item-bottom"></span>
                        </li>
                        
                    </ul>
                </div>
                <div class="title">新闻资讯
                    <span class="title-bottom"></span>
                </div>
            </div>
        </div>
        
    </div>
  
  
</template>

<script>
import { setInterval } from 'timers';
  export default {
    name: 'carrousel',
    data() {
      return {
        swiperOption: {
            autoplay: true,
            loop: true,
            delay: 2200,
            effect: "slide"
        },
        "list": [{
            "id": "w0001",
            "title": "新闻 | 《阴阳师》X京东818手机节：神秘寻宝之旅开启",
            "content": "来自海国的风暴持续蔓延，神秘势力悄然来袭……适逢《阴阳师》X京东818手机节跨界联动，大岳丸、不知火、鬼切、酒吞童子，四位人气……"
        },{
            "id":"w0002",
            "title": "新闻 | 游川逐浪自逍遥《阴阳师》荒川之主新皮肤上线！",
            "content": "远山隐在朦胧的水气中，月光铺满的水面粼粼闪动，偶有顽皮的鱼儿跃出水面，惊起几朵浪花。晚风拂去几分酷热的暑气，夏夜渐显凉爽。荒川……"
        },{
            "id": "w0003",
            "title": "公告 | 特邀测试玩家奖励公示",
            "content": "亲爱的阴阳师大人：特邀测试服的测试已圆满结束，感谢大人们的支持！测试期间大人们的优质反馈，寮办将作为调优数值和表现上的参考。"
        },{
            "id": "w00010",
            "title": "新闻 | 荒川的英雄《阴阳师》全新sp阶式神骁浪荒川之主来袭！",
            "content": "夕阳的余光铺落在荒川之上，将水面染成绚烂的红色。小妖们平日嬉戏的浅滩空旷无影，荒川沉入了安眠，静得只剩下水流的声音。荒川与大海……"
        },{
            "id": "w0004",
            "title": "新闻 | 《阴阳师》X京东818手机节：神秘寻宝之旅开启",
            "content": "来自海国的风暴持续蔓延，神秘势力悄然来袭……适逢《阴阳师》X京东818手机节跨界联动，大岳丸、不知火、鬼切、酒吞童子，四位人气……"
        },{
            "id":"w0005",
            "title": "新闻 | 游川逐浪自逍遥《阴阳师》荒川之主新皮肤上线！",
            "content": "远山隐在朦胧的水气中，月光铺满的水面粼粼闪动，偶有顽皮的鱼儿跃出水面，惊起几朵浪花。晚风拂去几分酷热的暑气，夏夜渐显凉爽。荒川……"
        },{
            "id": "w0006",
            "title": "新闻 | 《阴阳师》X京东818手机节：神秘寻宝之旅开启",
            "content": "来自海国的风暴持续蔓延，神秘势力悄然来袭……适逢《阴阳师》X京东818手机节跨界联动，大岳丸、不知火、鬼切、酒吞童子，四位人气……"
        },{
            "id":"w0007",
            "title": "新闻 | 游川逐浪自逍遥《阴阳师》荒川之主新皮肤上线！",
            "content": "远山隐在朦胧的水气中，月光铺满的水面粼粼闪动，偶有顽皮的鱼儿跃出水面，惊起几朵浪花。晚风拂去几分酷热的暑气，夏夜渐显凉爽。荒川……"
        },{
            "id": "w0008",
            "title": "新闻 | 《阴阳师》X京东818手机节：神秘寻宝之旅开启",
            "content": "来自海国的风暴持续蔓延，神秘势力悄然来袭……适逢《阴阳师》X京东818手机节跨界联动，大岳丸、不知火、鬼切、酒吞童子，四位人气……"
        },{
            "id":"w0009",
            "title": "新闻 | 游川逐浪自逍遥《阴阳师》荒川之主新皮肤上线！",
            "content": "远山隐在朦胧的水气中，月光铺满的水面粼粼闪动，偶有顽皮的鱼儿跃出水面，惊起几朵浪花。晚风拂去几分酷热的暑气，夏夜渐显凉爽。荒川……"
        }]
      }
    },
    mounted(){
            let index = 0
            let len = this.list.length
            let Width = len*300
            $(".list").css({
                "width": `${Width}px`
            })
            let timer = setInterval(()=>{
                index += 300
                $(".list").css({
                    "transform": `translateX(${-index}px)`
                })
                if(index>=Width)index=0;
            },3000)
        }
    
  }
</script>
<style lang="stylus" scoped>
    .main
        position: relative
        margin-top: 1.22rem
        height: 15.2rem

        .swiper
            margin-top: 1.22rem
            height: 15.2rem
        .box
            position: absolute
            bottom: 0
            z-index: 3
            width: 100%
            height: 4.5rem
            background: rgba(0 ,0 ,0 ,.6)
        .swiper-bottom
            position: relative
            display: flex
            margin: 0 auto
            width: 85%
            height: 100%
            // background: pink
            .left
                position: relative
                bottom: .74rem
                width: 2.9rem
                height: 5.74rem
                background: url("/static/img/box1.png")
                .ewm
                    position: absolute 
                    top: 1rem
                    left: 0
                    right: 0
                    margin: 0 auto
                    width: 2rem
                    height: 2rem
                .dow1
                    position: absolute
                    top: 3.2rem
                    left: 0
                    right: 0
                    margin: 0 auto
                    width: 2rem
                    height: 1rem
                .dow2
                    position: absolute
                    top: 4.4rem
                    left: 0
                    right: 0
                    margin: 0 auto
                    width: 2rem
                    height: 1rem
            .right
                position: relative
                margin-left: .3rem
                flex: 1
                height: 100%
                // background: #f60
                overflow: hidden
                .list
                    display: flex
                    flex-flow: nowrap row
                    justify-content: space-around
                    width: 300%
                    height: 100%
                    transform: translateX(0)
                    transition: .3s
                    .item
                        margin: auto 0
                        width: 4.8rem
                        height: 3.54rem
                        background: #fff
                        .item-title
                            margin: .2rem auto
                            width: 4rem
                            height: 1.2rem
                            line-height: .5rem
                            color: #000
                            font-size: .32rem
                            font-weight: 600
                            font-family: "Microsoft YaHei",simSun,"Lucida Grande","Lucida Sans Unicode",Arial
                        .item-content
                            margin: .2rem auto
                            width: 4rem
                            height: .8rem
                            line-height: .4rem
                            display: -webkit-box
                            -webkit-box-orient: vertical
                            -webkit-line-clamp: 2
                            overflow: hidden
                        .item-bottom
                            display: block
                            width: 41px
                            height: 5px
                            background: url(/static/img/arrow.png) no-repeat
                            margin-left: 160px

        .title
            position: absolute
            left: 3.2rem
            top: -.8rem
            z-index: 999
            width: 3.24rem
            height: .8rem
            background: rgba(0,0,0,.8)
            color: #c2a060
            text-align: center
            line-height: 34px
            .title-bottom
                display: block
                margin: 0 auto
                width: 1.6rem
                height: .08rem
                background-image: url(/static/img/box1.png)
                background-position: -155px -283px
                

        
</style>
